<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="css/headbott.css" type="text/css"/>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        margin: 0px;
        padding: 0px;
        font-size: 12px;
        font-family: "微软雅黑", Arial;
        text-align: center;
        color: #000;
    }

    div, p, h1, h2, h3, h4, h5, h6, ul, li, ol, dl, dt, dd, img, form {
        margin: 0;
        padding: 0;
        border: 0;
    }

    ul, ol, li {
        list-style: none;
    }

    img {
        border: 0;
        vertical-align: top;
    }

    a {
        text-decoration: none;
        cursor: pointer;
        color: #5A5A5A
    }

    a:hover {
        text-decoration: underline;
    }

    table, td, tr, th, input, select {
        font-size: 13px;
    }

    input {
        font-family: Arial;
    }

    /*text and password width*/
    table, td {
        border-collapse: collapse;
    }

    a:link {
        text-decoration: none;
        border: none;
    }

    a:hover {
        text-decoration: none;
        border: none;
    }

    a:active {
    }

    a {
    }

    a:hover, a:visited {
    }

    .clear {
        zoom: 1;
    }

    .clear:after {
        display: block;
        clear: both;
        height: 0;
        content: ''
    }


    body {
        background: #f9f9f9;
        color: #5A5A5A
    }

    .user-con {
        width: 1000px;
        margin: 20px auto;
        zoom: 1;
        overflow: auto;
    }

    .user-conl {
        float: left;
        width: 175px;
        border: 1px solid #c0c0c0;
        background: #f9f9f9;
        border-right: none
    }

    .user-conl li i {
        width: 19px;
        height: 20px;
        position: absolute;
        left: 30px;
        top: 15px;
        display: inline-block;
    }

    .user-conl li .i1 {
        background: url("images/Myhome_icom.png") no-repeat 0 0;
    }

    .user-conl li .i2 {
        background: url("images/Myhome_icom.png") no-repeat 0 -50px;
    }

    .user-conl li .i3 {
        background: url("images/Myhome_icom.png") no-repeat 0 -100px;
    }

    .user-conl li .i4 {
        background: url("images/Myhome_icom.png") no-repeat 0 -153px;
    }

    .user-conl li .i5 {
        background: url("images/Myhome_icom.png") no-repeat 0 -153px;
    }

    .user-conl li .i6 {
        background: url("images/Myhome_icom.png") no-repeat 0 -50px;
    }

    .user-conl li .i7 {
        background: url("images/Myhome_icom.png") no-repeat 0 -206px;
    }

    .user-conl li .i8 {
        background: url("images/Myhome_icom.png") no-repeat 0 -253px;
    }

    .user-conl li .i9 {
        background: url("images/Myhome_icom.png") no-repeat 0 -323px;
    }

    .user-conl li .i10 {
        background: url("images/Myhome_icom.png") no-repeat 0 -376px;
    }

    .user-conl li {
        position: relative
    }

    .user-conl li a {
        display: inline-block;
        height: 50px;
        width: 175px;
        line-height: 50px;
        border-left: 2px solid #f9f9f9;
        border-bottom: 1px #ebebeb solid;
    }

    .user-conl li b {
        display: inline-block;
        height: 50px;
        width: 175px;
        line-height: 50px;
        border-left: 2px solid #f9f9f9;
        border-bottom: 1px #ebebeb solid;
    }

    .user-conl li a:hover {
        background: #fff;
        color: #009fd6;
        border-bottom: 1px solid #009fd6;
        border-left: 2px solid #009fd6;
    }

    .user-conl li .u-hover {
        background: #fff;
        border-left: 2px solid #f9f9f9;
        border-bottom: 1px solid #009fd6;
        border-left: 2px solid #009fd6;
        color: #009fd6
    }

    .user-conl li .a-tit {
        font-size: 18px;
    }

    .user-conl li:hover .i1 {
        background: url("images/Myhome_icom.png") no-repeat -19px 0;
    }

    .user-conl li:hover .i2 {
        background: url("images/Myhome_icom.png") no-repeat -19px -50px;
    }

    .user-conl li:hover .i3 {
        background: url("images/Myhome_icom.png") no-repeat -19px -100px;
    }

    .user-conl li:hover .i4 {
        background: url("images/Myhome_icom.png") no-repeat -19px -153px;
    }

    .user-conl li:hover .i5 {
        background: url("images/Myhome_icom.png") no-repeat -19px -153px;
    }

    .user-conl li:hover .i6 {
        background: url("images/Myhome_icom.png") no-repeat -19px -50px;
    }

    .user-conl li:hover .i7 {
        background: url("images/Myhome_icom.png") no-repeat -19px -206px;
    }

    .user-conl li:hover .i8 {
        background: url("images/Myhome_icom.png") no-repeat -19px -253px;
    }

    .user-conl li:hover .i9 {
        background: url("images/Myhome_icom.png") no-repeat -20px -323px;
    }

    .user-conl li:hover .i10 {
        background: url("images/Myhome_icom.png") no-repeat -20px -376px;
    }

    .user-conr {
        float: left;
        width: 800px;
        border-zoom: 1;
        overflow: auto;
        background: #fff
    }

    .user-conr_tab li {
        cursor: pointer;
        width: 100px;
        height: 35px;
        line-height: 35px;
        border: 1px solid #c0c0c0;
        float: left;
        margin-left: 10px;
        border-bottom: none;
        background: #ccc;
    }

    .user-conr_tab .cur {
        background: #fff;
    }

    .user-conr_tab {
        width: 778px;
        height: 35px;
        border: 1px solid #c0c0c0;
        padding: 20px 0 0 20px;
    }

    .user-conr_tab2 {
        width: 798px;
        overflow: auto;
        zoom: 1;
        border: 1px solid #c0c0c0;
        border-top: none;
    }

    .user-conr_tab2 > ul > li {
        display: none;
        padding: 20px;
    }

    .user-conr_tab2 .curq2 {
        display: block;
    }

    #below table tbody td {
        text-align: left;
    }

</style>
<body>
<div id="header">
    <div class="heade-con">
        <div class="logo"><a href=""><img src="images/LOGO.png"/></a></div>
        <div class="nav posa">
            <ul>
                <li><a class="vcolor" href="index.jsp">首页</a></li>
                <li><a href="gyzc-list.jsp">公益众筹</a></li>
                <li><a href="cop.jsp">常见问题</a></li>
                <li><a href="ly-list.jsp">众筹资讯</a></li>
                <li><a href="new_product.jsp" style="">发布项目</a></li>
            </ul>
        </div>
        <div class="search">
            <form action="">
                <input type="text" class="search-txt" value="找项目">
                <input type="submit" class="search-but" value="">
            </form>
        </div>
        <div class="index-login">
            <c:if test="${user == null}">
                <a href="login.jsp">登录</a><a href="reg.jsp">注册</a><a href="./admin/admin_login.jsp">后台</a>
            </c:if>
            <c:if test="${user != null}">
                <a href="/product/getByUserId">个人中心</a><a href="user/logout" id="lout">退出</a>
            </c:if>
        </div>
    </div>
</div>
<script>

    var d_var = $(".search .search-txt").val();
    $(".search .search-txt").focus(function () {
        if ($(this).val() == d_var) {
            $(this).val("");
        }
    });

    $(".search .search-txt").blur(function () {
        if ($(this).val() == "") {
            $(this).val("找项目");
        }
    });
</script>
<div class="user-con">
    <div id="left" class="user-conl">
        <ul>
            <li><b class="a-tit" href="">项目管理</b></li>
            <li><i class="i1"></i><a class="u-hover" href="#">发起的项目</a></li>
            <li id="pay"><i class="i2"></i><a href="#">参与的项目</a></li>
            <li><i class="i4"></i><a href="#">点赞的项目</a></li>
            <li><i class="i6"></i><a href="#">资金管理</a></li>
            <li><b class="a-tit" href="#">消息管理</b></li>
            <li id="mycomment"><i class="i4"></i><a href="#">我的评论</a></li>
            <li><i class="i4"></i><a href="#">我的私信</a></li>
            <li><b class="a-tit" href="#">个人设置</b></li>
            <li id="myInfo"><i class="i7"></i><a href="#">个人信息</a></li>
            <li><i class="i8"></i><a href="#">安全信息</a></li>
            <li><i class="i9"></i><a href="#">收件地址管理</a></li>
            <li><i class="i10"></i><a href="#">实名认证</a></li>
        </ul>
    </div>

    <div id="right">
        <div style="display: none" class="user-conr"></div>
        <div class="user-conr">
            <div id="above" class="user-conr_tab">
                <ul>
                    <li class="cur">所有项目</li>

                </ul>
            </div>
            <div id="below" class="user-conr_tab2">
                <ul>
                    <li class="curq2">
                        <table style="width: 700px" class="layui-table">
                            <thead>
                            <tr>
                                <td>标题</td>
                                <td>类型</td>
                                <td>状态</td>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${pageInfo.list}" var="p">
                                <tr>
                                    <td>
                                        <a href="javascript:" data-toggle="modal" data-target="#myModal${p.id}">
                                                ${p.title}
                                        </a>
                                        <div class="modal fade" id="myModal${p.id}" tabindex="-1" role="dialog"
                                             aria-labelledby="myModalLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal"
                                                                aria-hidden="true">
                                                            &times;
                                                        </button>
                                                        <h4 class="modal-title" id="myModalLabel">
                                                                ${p.title}
                                                        </h4>
                                                    </div>

                                                    <div class="modal-body">

                                                        <table>
                                                            <tbody>
                                                            <tr>
                                                                <td style="width: 100px">故事</td>
                                                                <td>${p.story}</td>
                                                            </tr>
                                                            <tr>
                                                                <td>关于我</td>
                                                                <td>${p.aboutme}</td>
                                                            </tr>
                                                            <tr>
                                                                <td>愿景</td>
                                                                <td>${p.goal}</td>
                                                            </tr>
                                                            <tr>
                                                                <td>服务电话</td>
                                                                <td>${p.servicePhone}</td>
                                                            </tr>
                                                            </tbody>
                                                        </table>

                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default"
                                                                data-dismiss="modal">关闭
                                                        </button>
                                                    </div>

                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal -->
                                        </div>
                                    </td>
                                    <td style="text-align: center">${p.productType.name}</td>
                                    <td style="text-align: center">
                                        <c:if test="${p.status==0}">
                                            预热
                                        </c:if>
                                        <c:if test="${p.status==1}">
                                            制作中
                                        </c:if>
                                        <c:if test="${p.status==2}">
                                            筹款中
                                        </c:if>
                                        <c:if test="${p.status==3}">
                                            成功
                                        </c:if>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                        <div>
                            <nav aria-label="Page navigation">
                                <ul class="pagination">
                                    <li><a href="/product/getByUserId?page=1">首页</a></li>
                                    <c:if test="${pageInfo.hasPreviousPage}">
                                        <li>
                                            <a href="/product/getByUserId?page=${pageInfo.pageNum-1}"
                                               aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                    </c:if>
                                    <c:if test="${!pageInfo.hasPreviousPage}">
                                        <li>
                                            <a href="/product/getByUserId?page=${pageInfo.pageNum}"
                                               aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                    </c:if>
                                    <c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">
                                        <li <c:if test="${page_Num==pageInfo.pageNum}">
                                            class="active"
                                        </c:if>><a href="/product/getByUserId?page=${page_Num}">${page_Num}</a></li>
                                    </c:forEach>
                                    <c:if test="${pageInfo.hasNextPage}">
                                        <li>
                                            <a href="/product/getByUserId?page=${pageInfo.pageNum+1}" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </c:if>
                                    <c:if test="${!pageInfo.hasNextPage}">
                                        <li>
                                            <a href="/product/getByUserId?page=${pageInfo.pageNum}" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </c:if>
                                    <li><a href="/product/getByUserId?page=${pageInfo.lastPage}">尾页</a></li>
                                </ul>
                            </nav>
                        </div>

                    </li>
                    <li>
                        <table>
                            <thead></thead>
                            <tbody></tbody>
                        </table>
                    </li>
                </ul>
            </div>
        </div>
        <div hidden class="user-conr">
            <table class="layui-table">
                <thead>
                <tr>
                    <td>项目标题</td>
                    <td>项目愿景</td>
                    <td>支持金额</td>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${user.upmProductList}" var="prod">
                    <tr>
                        <td>${prod.title}</td>
                        <td>${prod.goal}</td>
                        <td>${prod.personPayMoney}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
        <div hidden class="user-conr">
            <table class="layui-table">
                <thead>
                <tr>
                    <td>项目标题</td>
                    <td>项目愿景</td>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${user.DProductList}" var="produ">
                    <tr>
                        <td>${produ.title}</td>
                        <td>${produ.goal}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
        <div hidden class="user-conr">资金管理</div>
        <div hidden class="user-conr"></div>
        <%--占位--%>
        <div hidden class="user-conr">
            <table id="ct" class="layui-table">
                <thead>
                <tr>
                    <td>项目编号</td>
                    <td>评论内容</td>
                    <td>评论时间</td>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
            <div id="page_nav_area">
                <nav aria-label="Page navigation">

                </nav>
            </div>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#mycomment").click(function () {
                        $.ajax({
                            type: "post",
                            url: "/comment/getMyComment",
                            data: {page: 1},
                            dataType: "json",
                            success: function (result) {
                                console.log(result);
                                build_ct_table(result);
                                build_page_nav(result);
                            },
                            error: function (data) {

                            }
                        })
                    })
                })

                function build_ct_table(result) {
                    $("#ct tbody").empty();
                    var comments = result.extend.commentPageInfo.list;
                    $.each(comments, function (index, item) {
                        var empIdTd = $("<td></td>").append(item.productID);
                        var empNameTd = $("<td></td>").append(item.content);
                        var emailTd = $("<td></td>").append(item.createTime);
                        $("<tr></tr>").append(empIdTd).append(empNameTd).append(emailTd).appendTo("#ct tbody");
                    })
                }

                function build_page_nav(result) {
                    $("#page_nav_area nav").empty();
                    var pageNum = result.extend.commentPageInfo.pageNum;
                    var pages = result.extend.commentPageInfo.pages;
                    var ul = $("<ul></ul>").addClass("pagination");
                    var firstPageLi = $("<li></li>").append("<a href='javascript:void(0)'>首页</a>");
                    firstPageLi.click(function () {
                        toPage(1);
                    })
                    var prePageLi = $("<li></li>").append("<a href='javascript:void(0)'>&laquo</a>");
                    prePageLi.click(function () {
                        toPage(pageNum == 1 ? 1 : (pageNum - 1));
                    })
                    var nextPageLi = $("<li></li>").append("<a href='javascript:void(0)'>&raquo</a>");
                    nextPageLi.click(function () {
                        toPage(pageNum == pages ? pageNum : (pageNum + 1))
                    })
                    var lastPageLi = $("<li></li>").append("<a href='javascript:void(0)'>尾页</a>");
                    lastPageLi.click(function () {
                        toPage(result.extend.commentPageInfo.pages);
                    })
                    ul.append(firstPageLi).append(prePageLi);
                    $.each(result.extend.commentPageInfo.navigatepageNums, function (index, item) {
                        var numLi = $("<li></li>").append("<a href='javascript:void(0)'>" + item + "</a>");
                        if (result.extend.commentPageInfo.pageNum == item) {
                            numLi.addClass("active");
                        }
                        numLi.click(function () {
                            toPage(item);
                        })
                        ul.append(numLi);
                    })
                    ul.append(nextPageLi).append(lastPageLi);
                    ul.appendTo("#page_nav_area nav");
                }

                function toPage(pn) {
                    $.ajax({
                        type: "post",
                        url: "/comment/getMyComment",
                        data: {page: pn},
                        dataType: "json",
                        success: function (result) {
                            build_ct_table(result);
                            build_page_nav(result);
                        }
                    });
                }
            </script>
        </div>
        <div hidden class="user-conr">我的私信</div>
        <div hidden class="user-conr"></div>
        <%--占位--%>
        <div hidden class="user-conr">
            <table class="layui-table">
                <tbody>
                <tr>
                    <td>用户名</td>
                    <td>${user.username}</td>
                </tr>
                <tr>
                    <td>email</td>
                    <td>${user.email}</td>
                </tr>
                <tr>
                    <td>电话</td>
                    <td>${user.phone}</td>
                </tr>
                </tbody>
            </table>

        </div>
        <div id="safe" hidden class="user-conr">安全信息</div>
        <div hidden class="user-conr">收件地址管理</div>
        <div hidden class="user-conr">
            <c:if test="${user.status==0}">
                <form action="/user/identify" method="post" enctype="multipart/form-data">
                    <table class="layui-table">
                        <tbody>

                        <tr>
                            <td>真实姓名</td>
                            <td><input class="layui-input" required type="text" name="realname"></td>
                        </tr>
                        <tr>
                            <td>身份证号</td>
                            <td><input class="layui-input" required type="text" name="idcard"></td>
                        </tr>
                        <tr>
                            <td>身份证国徽面</td>
                            <td><input required name="guohui" type="file"></td>
                        </tr>
                        <tr>
                            <td>身份证人像面</td>
                            <td><input required name="hp" type="file"></td>
                        </tr>

                        </tbody>
                    </table>
                    <button type="submit" class="btn btn-default">提交</button>
                </form>
            </c:if>
            <c:if test="${user.status == 1}">
                <h1>认证中，请耐心等待！</h1>
            </c:if>
            <c:if test="${user.status == 2}">
                <h1>您已认证！</h1>
            </c:if>
            <c:if test="${user.status==3}">
                <h1>认证失败！！！请重新提交</h1>
                <table class="layui-table">
                    <tbody>
                    <from action="user/identify" method="post" enctype="multipart/form-data">
                        <tr>
                            <td>真实姓名</td>
                            <td><input required type="text" name="realname"></td>
                        </tr>
                        <tr>
                            <td>身份证号</td>
                            <td><input required type="text" name="idcard"></td>
                        </tr>
                        <tr>
                            <td>身份证国徽面</td>
                            <td><input required name="guohui" type="file"></td>
                        </tr>
                        <tr>
                            <td>身份证人像面</td>
                            <td><input required name="hp" type="file"></td>
                        </tr>
                    </from>
                    </tbody>
                </table>
            </c:if>
        </div>
    </div>


    <script type="text/javascript">
        $(document).ready(function () {
            $("#left li:not(:has(b))").click(function () {
                var index = $(this).index();
                $(".user-conr").hide();
                $(".user-conr:eq(" + index + ")").show();
            })
        })
    </script>
    <script>
        window.onload = function () {
            var left = document.getElementById("left");
            var right = document.getElementById("right");
            var above = document.getElementById("above");
            var below = document.getElementById("below");
            right.style.height = left.offsetHeight + "px";
            below.style.height = (left.offsetHeight - above.offsetHeight - 1) + "px";
        }
    </script>
    <script>
        $(document).ready(function () {
            $(".user-conl li a").click(function () {
                $(".user-conl li a").removeClass("u-hover");
                $(this).addClass("u-hover");
            })
            $(".user-conr_tab>ul>li").click(function () {
                $(".user-conr_tab>ul>li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
                $(".user-conr_tab2>ul>li").hide().eq($(this).index()).show();
            })
        });

    </script>
</div>
<div id="bottom">
    <div class="bot-con1">
        <ul>
            <li class="bot-con1-li1">我们已经做到</li>
            <li>单项支持人数<span class="inde-span1"></span></li>
            <li>单项筹款金额<span class="inde-span2"></span></li>
            <li>累计筹款金额<span class="inde-span3"></span></li>
        </ul>
    </div>
    <div class="bot-con1 bot-con2">
        <ul>
            <li class="bot-con1-li1">发起项目流程</li>
            <li><span class="inde-span4"></span>发起人创建项目</li>
            <li><span class="inde-span5"></span>项目获得支持</li>
            <li><span class="inde-span6"></span>发起人发放回报</li>
            <li><span class="inde-span7"></span>用户收到回报</li>
        </ul>
    </div>
    <div class="bottom-ggt"><a href=""><img src="images/bottbom_68.jpg" alt=""/></a></div>
    <div class="zc-yqlink">
        <ul>
            <li><a href="">阿里巴巴集团</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">天猫</a></li>
            <li><a href="">聚划算</a></li>
            <li><a href="">全球速卖通</a></li>
            <li><a href="">阿里巴巴国际交易市场</a></li>
            <li><a href="">1688</a></li>
            <li><a href="">阿里妈妈</a></li>
            <li><a href="">阿里旅行</a></li>
            <li><a href="">阿里云计算</a></li>
            <li><a href="">阿里巴巴集团</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">天猫</a></li>
            <li><a href="">聚划算</a></li>
            <li><a href="">全球速卖通</a></li>
            <li><a href="">阿里巴巴国际交易市场</a></li>
            <li><a href="">1688</a></li>
            <li><a href="">阿里妈妈</a></li>
            <li><a href="">阿里云计算</a></li>
        </ul>
    </div>
    <div class="footer-bd">

        <a href=" ">关于淘宝</a>
        <a href=" ">合作伙伴</a>
        <a href=" ">营销中心</a>
        <a href=" ">廉正举报</a>
        <a href=" ">联系客服</a>
        <a href=" ">开放平台</a>
        <a href=" ">诚征英才</a>
        <a href=" ">联系我们</a>
        <a href=" ">网站地图</a>
        <a href=" ">法律声明</a>　　　
        <em>© 2003-2015 Taobao.com 版权所有</em><br>

        <br>
        <span>网络文化经营许可证：<a href=" ">浙网文[2013]0268-027号</a></span>
        <b>|</b>
        <span data-spm-protocol="i">增值电信业务经营许可证：<a href="">浙B2-20080224-1</a></span>
        <b>|</b>
        <span>信息网络传播视听节目许可证：1109364号</span>
        <b>|</b>
        <span>举报电话:0571-81683755</span>
    </div>
</div>

</body>
</html>